<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>幻灯片</title>
<style>    
    .juzi{
    width:700px;
    height:500px;
    margin:100px auto;
    overflow: hidden;
    box-shadow: 0 0 5px rgba(0,0,0,1);
    background-size:cover;
    background-position:center;
    -webkit-animation-name:"JUZI";
    -webkit-animation-duration:50s;
    animation-direction:alternate;
-webkit-animation-direction:alternate;  
 }
 @-webkit-keyframes "JUZI"{
     0%{
     background: url("https://tse2-mm.cn.bing.net/th/id/OIP-C.jl4pPK40IUmDL_-Wu0yMqgHaEK?pid=ImgDet&rs=1")
     }
   25%{
    background: url("https://ts1.cn.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0");
   } 
  50%{
    background: url("https://ts1.cn.mm.bing.net/th/id/R-C.df4462fabf18edd07195679a5f8a37e5?rik=FnNvr9jWWjHCVQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50059%2f8720.jpg_wh1200.jpg&ehk=ofb4q76uCls2S07aIlc8%2bab3H5zwrmj%2bhqiZ%2fyw3Ghw%3d&risl=&pid=ImgRaw&r=0");
  }
  75%{
    background: url("https://ts1.cn.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0");
  }
  100%{
    background: url("https://pic.3gbizhi.com/2019/0928/20190928012439343.jpg");
  }
 }
</style>
<title>Doucument</title>
</head>
<body>
<div class="juzi"></div>
</body>
</html>